<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>告警统计分析-报表</title>
<link rel="stylesheet" href="../../css/s_plus.css" />
<link rel="stylesheet" href="../../css/base.css" />
<link rel="stylesheet" href="../../css/layout.css" />
<link rel="stylesheet" href="../../css/choice.css" />
<link rel="stylesheet" href="../../css/hui.css" />

<script type="text/javascript" src="../../libs/vue.js" ></script>
<script type="text/javascript" src="../../js/jquery.1.9.1.min.js" ></script>
<script type="text/javascript" src="../../js/app/url.js" ></script>
<script type="text/javascript" src="../../libs/hui.js" ></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/app/api.js"></script>
<script src="../../js/control/echarts.common.min.js"></script>
</head>
<body>
	
	

	
	<div id="wrapper">
<header class="f_l maxbox subhead">
  <a class="back" @click="back"><i class="iconfont">&#xe605;</i></a>
  <h1>告警统计分析</h1>
</header>
<section class="f_l maxbox edit_list">
<div id="echartsPie" style="width: 100%;"></div>
</section>
</div>
<script type="text/javascript">
	
			
			var head = $(".subhead").height();
//			var foot = $(".work_list").height();
			var pageHeight = $(document).height();
			var mapHeight = pageHeight - head ;
			$("#echartsPie").height(mapHeight-50);
	
	function back(){
		//alert('222');
		hui.back();
	}
	

	var sp = new Vue({
		el:"#wrapper",
		data:{
			todayAlarmData:[],
			yesterdayAlarmData:[]
		},
		methods:{
			back:function(){
//				alert('222');
				hui.back();
			}
		}
		,mounted:function(){
			loadDetail();
		}
	});
	
	var statisticsGjlb_option = {
			    title : {
			        text: '告警统计分析'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['今日','昨日']
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
			            data : ['一般告警','严重告警']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            axisLabel : {
			                formatter: '{value} '
			            }
			        }
			    ],
			    series : [
			        {
			            name:'今日',
			            type:'line',
			            data:sp.todayAlarmData
			        },
			        {
			            name:'昨日',
			            type:'line',
			            data:sp.yesterdayAlarmData
			        }
			    ]
			};
	
	
	var echartsPie= echarts.init(document.getElementById('echartsPie'));
	
		
	echartsPie.setOption(statisticsGjlb_option);
		
	
	
		
		
		function loadDetail(){
					
					var username=	localStorage.getItem("username");
					var sec= localStorage.getItem("sec_pwd");
				  	var time = apiManage.getNow();
				  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
				  	var paramKey=hex_md5(key);
				  	var jsonParam = JSON.stringify({loginName:username,time:time,key:paramKey});
				     console.log("jsonParam:  "+jsonParam);
						var path = urlManager.getAlarmTotal();
						
						console.log("path:  "+path);
							hui.loading("");
								 $.ajax({
						         type: "GET",
						         url: path,
						         beforeSend: function(request) {
						            request.setRequestHeader("loginName",username);
						            request.setRequestHeader("time",time);
						            request.setRequestHeader("sign",paramKey);
						            request.setRequestHeader("Content-Type","application/text");
						
						         },
						         success: function(result) {
						         	hui.closeLoading();
						          	console.log("告警统计分析:"+JSON.stringify(result));
						      sp.yesterdayAlarmData= result.data.yesterdayAlarmData;
						      sp.todayAlarmData= result.data.todayAlarmData;
//								     data":{"yesterdayAlarmData
				              console.log(JSON.stringify(sp.yesterdayAlarmData));
							              console.log(JSON.stringify(sp.todayAlarmData));

										
						         }
						             
						         
						     });
				  
					
					
				}
			
		
	
		
	                   
</script>
</body>
</html>